<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="流程名称：">
                <el-input v-model="flowStore.flowModel.flowName" />
            </el-form-item>
            <el-form-item label="流程类型：">
                <el-tree-select v-model="flowStore.flowModel.flowTypeName" :data="flowTypeTree" check-strictly
                    :render-after-expand="false" @node-click="handleNodeClick" placeholder="请选择..." />
            </el-form-item>
            <el-form-item label="是否启用：">
                <el-checkbox v-model="isUsed" label="启用" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useFlowTypeTable } from '../../hooks/FlowManager/useFlowTypeTable';
let { flowTypeTree, flowStore, getFlowTypeTree } =
    useFlowTypeTable(1, 10);
getFlowTypeTree();

//是否启用
const isUsed = computed({
    get() {
        return flowStore.flowModel.isUsed === 1;
    },
    set(value) {
        flowStore.flowModel.isUsed = value ? 1 : 0;
    },
});

function handleNodeClick(node) {
    flowStore.flowModel.flowTypeId = node.id;
    flowStore.flowModel.flowTypeName = node.label;
};
</script>